<template>
  <CommonPanel title="地铁活动">
    <template #content>
      <div class="activity">
        <vue3-seamless-scroll :list="list" class="scroll" :hover="true" :step="0.4">
          <div class="item" v-for="(item, index) in list" :key="index">
            <span class="message">{{ item.message }}</span>
            <span class="time">{{ item.time }}</span>
          </div>
        </vue3-seamless-scroll>
      </div>
    </template>
  </CommonPanel>
</template>

<script setup>
import { ref } from 'vue';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import CommonPanel from '../panel/CommonPanel.vue';

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    message: '7月31日,全线20座车站封顶',
    time: '2022-05-01',
  });
}
// 使用 ref 使数据响应式
const list = ref(data);
</script>

<style scoped>
.activity {
  color: #fff;
  width: 100%;
  width: 510px;
  height: 100%;
  height: 230px;
  overflow: hidden;
  pointer-events: all;
}

.activity .scroll {
  height: 200px;
  margin: 10px;
  overflow: hidden;
}

.item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  padding-right: 60px;
}

.item > span:first-child {
  color: #5dcad0;
}

.item > span:last-child {
  color: #667eb8;
  font-weight: bold;
}
</style>
